<template>
	<view class="content">
		<!--  :enable-back-to-top="currentIndex === tabIndex" 在微信小程序上可以多加这一句 -->
		<z-paging v-if="firstLoaded || isCurrentPage" ref="paging" v-model="dataList" @query="queryList" :fixed="false"
			:enable-back-to-top="currentIndex === tabIndex" auto-show-system-loading>
			<view class="order" v-for="(item, index) in dataList" :key="item.saleId" @click="item_click(item,index)">
				<view class="left">
					<text class="txt">{{item.carName}}</text>
					<text class="name">{{item.customName}}</text>
				</view>
				<view class="right">
					<text class="time">{{item.createTime}}</text>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		onMounted,
		nextTick
	} from 'vue';
	import {
		onShow
	} from "@dcloudio/uni-app"
	import {
		api_saleOrder_page,
		api_saleOrder_delete
	} from "../../apis/apis.js"
	import {
		useMainStore
	} from "../../utils/store.js"

	const store = ref(useMainStore());

	// 定义响应式数据  
	const dataList = ref([]);
	const firstLoaded = ref(false);
	const isCurrentPage = ref(false);
	const paging = ref(null);
	const list = ref([]);

	const props = defineProps({
		tabIndex: {
			type: Number,
			default: 0
		},
		currentIndex: {
			type: Number,
			default: 0
		}
	});


	// 监听 currentIndex 的变化  
	watch(() => props.currentIndex, (newVal) => {
		if (newVal === props.tabIndex) {
			if (!firstLoaded.value) {
				setTimeout(() => {
					isCurrentPage.value = true;
				}, 100);
			}
		}
	}, {
		immediate: true
	});

	// 刷新方法  
	const reload = () => {
		// 使用 nextTick 确保 DOM 已经更新
		nextTick(() => {
			if (paging.value) { // 检查 paging 是否已经定义
				paging.value.reload();
			}
		});
	};

	//加载订单分页数据
	const queryList = async (current, size) => {
		const params = {
			current: current,
			size: size,
		};
		try {
			const res = await api_saleOrder_page(params).then(res => {
				list.value = res.data.records;
				if (props.tabIndex == 0) { //显示待施工
					let newList = list.value.filter(item => item.buildStatus == 3);
					paging.value.complete(newList);
				} else if (props.tabIndex == 1) { //显示施工中
					let newList = list.value.filter(item => item.buildStatus == 4);
					paging.value.complete(newList);
				}
			});
			firstLoaded.value = true;
		} catch (error) {
			paging.value.complete(false);
		}
	};

	//点击事件
	const item_click = (item, index) => {
		console.log('点击了', index);
		if (props.currentIndex == 0) {
			uni.navigateTo({
				url: "/pages/worker/order-list/order-arrange/order-arrange"
			});
			store.value.set_orderId(item.saleId);
		}
	};

	onShow(() => {
		reload();
	})
</script>

<style lang="scss" scoped>
	/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
	.content {
		height: 100%;
	}

	.order {
		height: 144rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 750rpx;
		padding: 30rpx 25rpx 16rpx 25rpx;
		border-bottom: 1rpx solid #e7e7e7;

		.left {
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.txt {
				font-family: Alibaba_PuHuiTi_Light;
				font-weight: 300;
				font-size: 36rpx;
				color: $font-primary-color;
			}

			.name {
				font-family: Alibaba_PuHuiTi_Light;
				font-weight: 300;
				font-size: 32rpx;
				color: $font-sub-color;
			}
		}

		.right {

			.time {
				font-family: Alibaba_PuHuiTi_Thin;
				font-weight: 250;
				font-size: 32rpx;
				color: $font-9e-color;
			}
		}
	}
</style>